<template>
  <div class="miniCardComponents">
    <span class="title">{{ props.title }}</span>
    <h2>{{ props.nums }}</h2>
    <span class="gray">{{ props.precent }}：</span>
    <span
      class="precent"
      :class="{
        redP: props.precentData > 0,
        greenP: props.precentData < 0
      }"
    >
      {{ props.precentData || 0 }}%
    </span>
    <span v-if="props.precentData > 0" class="triangle up"></span>
    <span v-if="props.precentData < 0" class="triangle down"></span>
  </div>
</template>

<script setup lang="ts">
  // 使用Vue编译器宏不需要显式导入

  // 定义props接口
  interface MiniCardProps {
    title?: string
    precent?: string
    nums?: number
    precentData?: number
  }

  // 使用withDefaults和defineProps设置props和默认值
  const props = withDefaults(defineProps<MiniCardProps>(), {
    title: '',
    precent: '',
    nums: 0,
    precentData: 0
  })
</script>

<style lang="scss" scoped>
  .miniCardComponents {
    $red: #d04a41;
    $green: #427a0a;
    margin-right: 50px;

    h2 {
      margin: 12px 0;
      font-weight: bold;
      color: var(--art-text-color-regular);
    }

    .title {
      font-size: 16px;
      font-weight: 700;
      color: var(--art-text-color-regular);
    }

    .gray {
      color: var(--art-text-gray-600);
    }

    .precent {
      margin: 0 8px;
    }

    .redP {
      color: $red;
    }

    .greenP {
      color: $green;
    }

    .triangle {
      width: 0;
      height: 0;
      position: relative;
      border: 8px solid;
    }

    .up {
      position: relative;
      top: -12px;
      border-color: transparent transparent $red transparent;
    }

    .down {
      position: relative;
      top: 12px;
      border-color: $green transparent transparent transparent;
    }
  }
</style>
